<script setup>
import { ref } from "vue";
import { Notification, Modal } from "@arco-design/web-vue";
import { sign } from "../service/cos";
import { useStore } from "../store";

const props = defineProps(["iconSize", "icon"]);
const store = useStore();
const isAddIconModalShow = ref(false);
const isDeleteIconLoading = ref(false);

//复制SVG提示
const iconCopyHandle = () => {
  Notification.success("复制成功！");
};
//删除Icon回调
const iconDeleteHandle = () => {
  Modal.open({
    title: "删除Icon",
    content: "Icon将从云端删除，此行为不可撤销，确认吗？",
    okLoading: isDeleteIconLoading.value,
    onOk() {
      isDeleteIconLoading.value = true;
      store.deleteIcon(props.icon.url.split("/")[1], props.icon.name).then(
        () => {
          isDeleteIconLoading.value = false;
          Notification.success("删除成功！");
        },
        () => {
          isDeleteIconLoading.value = false;
          Notification.error("删除失败！");
        }
      );
    },
  });
};
</script>

<template>
  <div
    class="iconContainer"
    :class="props.iconSize"
    @mouseover="isAddIconModalShow = true"
    @mouseout="isAddIconModalShow = false"
  >
    <!-- Icon的SVG部分 -->
    <img :src="sign(icon.url)" class="mySvg" />
    <!-- Icon的遮罩按钮部分 -->
    <div v-show="isAddIconModalShow && props.iconSize" class="iconDetail">
      <div class="detailOption" @click.stop="iconCopyHandle">
        <icon-copy size="24" />
      </div>
      <div class="detailOption" @click.stop="iconDeleteHandle">
        <icon-delete size="24" />
      </div>
    </div>
    <!-- Icon名称 -->
    <div v-if="props.iconSize" class="iconName">{{ icon.name }}</div>
  </div>
</template>

<style scoped>
.mySvg {
  width: 100%;
  height: 100%;
}

.iconContainer {
  color: #fff;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.iconContainer:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: transform 0.1s linear;
}

.big {
  width: 120px;
  height: 120px;
}

.iconDetail {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgb(31, 20, 0);
  display: flex;
  flex-direction: column;
}

.detailOption {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detailOption:hover {
  background-color: rgb(86, 56, 0);
  color: orange;
}

.iconName {
  position: absolute;
  bottom: -24px;
}
</style>
